<template>
  <a-form-item :label="item.label"  style="margin:0;padding:0">
    <a-form-item class="check" v-if="item.field_type == '6'"  :style="{ display: 'inline-block',width: '100%'}" >
      <a-checkbox size="small" :default-checked="false" v-decorator="[ `${item.field}`,getOptions(item) ]" />
    </a-form-item>
    <a-form-item v-if="item.mode == 'single'"  :style="{ display: 'inline-block',width: '100%'}">
      <a-select  size="small" v-if="isNotEmpty(dictProperty.options)||dictProperty.dep" allowClear
                 :mode="item.mode=='single' && dictProperty.multi=='1'? 'multiple':'default'"
                 show-search
                 option-filter-prop="children"
                 :filter-option="filterOption"
                 :placeholder="`请选择${item.label}`"
                 v-decorator="[ `${item.field}`,getOptions(item) ]"
                 :style="{ display: 'inline-block'}"
      >
        <a-select-option v-for="(p,i) of dictProperty.options" :key="(i + 9).toString(36) + i"  :value="p.value||p">
          {{p.text||p}}
        </a-select-option>
      </a-select>
      <a-input size="small" v-else-if="item.field_type && ['1','2','5'].indexOf(item.field_type) !== -1" :label="item.label" v-decorator="[ `${item.field}`,getOptions(item)]" :placeholder="`请输入${item.label}`"
               :style="{ display: 'inline-block'}"/>
      <a-date-picker size="small" :mode='dateModel(item)'  v-else-if="item.field_type && ['3','4'].indexOf(item.field_type) !== -1" :show-time="item.field_type==4" :label="item.label"  v-decorator="[ `${item.field}`,getOptions(item) ]" :placeholder="`请选择${tip(item)}`"
                     :open="open[item.field]" @focus="openSet(item.field,true)" @change="openSet(item.field,false)" :style="{ display: 'inline-block'}"  :value-format="dateFormat(item)" :format="dateFormat(item)"  @panelChange="(v)=>{openSet(item.field,false);handlePanelChange(v,item.field,dateModel(item))}"/>
    </a-form-item>
    <template v-else>
      <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 20px)' }">
        <a-select  size="small" v-if="isNotEmpty(dictProperty.options)||dictProperty.dep" allowClear
                   :mode="item.mode=='single' && dictProperty.multi=='1'? 'multiple':'default'"
                   show-search
                   option-filter-prop="children"
                   :filter-option="filterOption"
                   :placeholder="`请选择${item.label}`"
                   v-decorator="[ `${item.field}_begin`,getOptions(item) ]"
                   :style="{ display: 'inline-block'}"
        >
          <a-select-option v-for="(p,i) of dictProperty.options" :key="(i + 9).toString(36) + i"  :value="p.value||p">
            {{p.text||p}}
          </a-select-option>
        </a-select>
        <a-input size="small" v-else-if="item.field_type && ['1','2','5'].indexOf(item.field_type) !== -1" :label="item.label" v-decorator="[ `${item.field}_begin`,getOptions(item,1) ]" :placeholder="`请输入${item.label}`"
                 :style="{ display: 'inline-block'}"/>
        <a-date-picker  size="small" :mode='dateModel(item)'  v-else-if="item.field_type && ['3','4'].indexOf(item.field_type) !== -1" :show-time="item.field_type==4" :label="item.label"  v-decorator="[ `${item.field}_begin`,getOptions(item,1) ]" :placeholder="`请选择${tip(item)}`"
                        :open="open[`${item.field}_begin`]" @focus="openSet(`${item.field}_begin`,true)" @change="openSet(`${item.field}_begin`,false)" :style="{ display: 'inline-block'}"  :value-format="dateFormat(item)" :format="dateFormat(item)"  @panelChange="(v)=>{openSet(`${item.field}_begin`,false);handlePanelChange(v,`${item.field}_begin`,dateModel(item))}"/>
      </a-form-item>
      <span :style="{ display: 'inline-block',width: '24px',textAlign: 'center' }">
          ~
      </span>
      <a-form-item  :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
        <a-select  size="small" v-if="isNotEmpty(dictProperty.options)||dictProperty.dep" allowClear
                   :mode="item.mode=='single' && dictProperty.multi=='1'? 'multiple':'default'"
                   show-search
                   option-filter-prop="children"
                   :filter-option="filterOption"
                   :placeholder="`请选择${item.label}`"
                   v-decorator="[ `${item.field}_end`,getOptions(item) ]"
                   :style="{ display: 'inline-block'}"
        >
          <a-select-option v-for="(p,i) of dictProperty.options" :key="(i + 9).toString(36) + i"  :value="p.value||p">
            {{p.text||p}}
          </a-select-option>
        </a-select>
        <a-input size="small" v-else-if="item.field_type && ['1','2','5'].indexOf(item.field_type) !== -1" :label="item.label" v-decorator="[ `${item.field}_end`,getOptions(item,2) ]" :placeholder="`请输入${item.label}`"
                 :style="{ display: 'inline-block'}"/>
        <a-date-picker size="small" :mode='dateModel(item)'  v-else-if="item.field_type && ['3','4'].indexOf(item.field_type) !== -1" :show-time="item.field_type==4" :label="item.label" v-decorator="[ `${item.field}_end`,getOptions(item,2) ]" :placeholder="`请选择${tip(item)}`"
                       :open="open[`${item.field}_end`]" @focus="openSet(`${item.field}_end`,true)" @change="openSet(`${item.field}_end`,false)" :style="{ display: 'inline-block'}"  :value-format="dateFormat(item)" :format="dateFormat(item)"  @panelChange="(v)=>{openSet(`${item.field}_end`,false);handlePanelChange(v,`${item.field}_end`,dateModel(item))}"/>
      </a-form-item>
    </template>
  </a-form-item>
 </template>
<script>
import encode from '@/api/encode'

export default {
      name: "HKFormItem.vue",
      props: {
        dictProperties:{
          type: Object,
          default: function(){
            return {};
          }
        },
        dictProperty:{
          type: Object,
          default: function(){
            return {};
          }
        },
        item:{
          type: Object,
          default: function(){
            return {};
          }
        },
        itemData: {
          required: false
        }
      },
      data() {
        //动态初始化，可联动
        let openStatus={}
        if(this.item&&(this.item.field_type==3||this.item.field_type==4)){
             if(this.item.mode=='single'){
                openStatus[this.item.field]=false;
             }else{
                openStatus[`${this.item.field}_begin`]=false;
                openStatus[`${this.item.field}_end`]=false;
             }
        }
        return {
          rules:{},
          open: openStatus,
          labelCol: {
            xs: { span: 24 },
            sm: { span: 5 }
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 12}
          },
        }
      },
      methods:{
        debug(){
          console.error(JSON.stringify(this.dictProperty.options));
        },
        filterOption(input, option) {
          //console.error(JSON.stringify(option.componentOptions));
          return (
            option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
            option.componentOptions.propsData.value.toString().toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
            chineseToPinYin(option.componentOptions.children[0].text).toLowerCase().indexOf(input.toLowerCase()) >= 0||
            encode.makePy(option.componentOptions.children[0].text).toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
            encode.makeWb(option.componentOptions.children[0].text).toLowerCase().indexOf(input.toLowerCase()) >= 0
          );
        },
        tip(item){
          let str='';
          str = item.field_type==4?'时间':'日期'
          if(item['label'].indexOf("年")!=-1) str='年份';
          if(item['label'].indexOf("月")!=-1) str='月份';
          return str;
        },
        openSet(key,status){
          this.open[key]=status;
          //console.error(JSON.stringify(this.open));
        },
        isNotEmpty:function(obj){
          //console.error(JSON.stringify(obj))
          return obj && !$.isEmptyObject(obj) ;
        },
        getOptions:function(item,type){
          //console.error(JSON.stringify(item))
          let rules = [],prefix='';
          if (type==1) prefix='起始';
          if (type==2) prefix='末尾';
          let {is_required,label,field,mode} = item;
          if(is_required>1){
             rules.push({required:true,message: `${prefix}${label}不能为空！`})
          }
          let options = {rules:rules}
          //console.error(JSON.stringify(options))
          return options;
        },
        dateModel(item){
          if(item['label'].indexOf("年")!=-1) return  'year';
          if(item['label'].indexOf("月")!=-1) return  'month';
          return 'date';
        },
        dateFormat(item){
          if(item['label'].indexOf("年")!=-1) return  'YYYY';
          if(item['label'].indexOf("月")!=-1) return  'YYYY-MM';
          return item.field_type==4?'YYYY-MM-DD HH:mm:ss':'YYYY-MM-DD';
        },
        handlePanelChange(value, key ,mode) {
          if(mode=='year'||mode=='month') {
            let obj = {};
            obj[key] = value;
            this.$emit('dateChange', obj)
          }
        },
      },
      computed: {
        count() {
          return this.expand ? 11 : 3;
        },
        expandLabel(){
          return this.expand ? '收起' : '展开';
        }
      },
      mounted(){
        //console.error(JSON.stringify(this.open));
      }
    }
</script>

<style scoped>

</style>